<template>
	<view class="app">
		<view class="issueBox">
			<img src="/static/images/home.jpg" alt="" />
			<view class="message">
				<ul class="messageBox">
					<li class="top">
						<view class="topGPS" @click="userStore.isShowModal = true;">
							{{indent}}
						</view>
					</li>
					<li class="bottom">
						<view class="bottomGPS" @click="goLocation">
							{{home}}
						</view>
					</li>
					<button @click="userStore.isShowModal = true">立即下单</button>
				</ul>
				<view class="boxFooter">
					<ul>
						<li>收费规则</li>
						<li>下单须知</li>
						<li>接单赚钱</li>
					</ul>
				</view>
			</view>
		</view>
		<HalfModal v-model="userStore.isShowModal" v-if="showModelVerson"></HalfModal>
		<LoginModal v-model="userStore.isShowModal" v-if="!showModelVerson">

		</LoginModal>
	</view>
</template>

<script setup lang="ts">
	import { ref } from 'vue';
	import { onLoad, onShow, onHide, onUnload } from '@dcloudio/uni-app'
	import { useUserStore } from '@/store'
	import HalfModal from '@/components/HalfModal.vue'
	import LoginModal from '@/components/LoginModal.vue'
	import { recipient } from '../../api/api'
	//引入订单pinia状态管理
	import { useRecipientStore } from '@/store/recipient'

	const recipienData = useRecipientStore()
	//控制半模态弹窗
	const userStore = useUserStore()
	//登录状态
	const loginCode = ref('')
	//半模态模板
	const showModelVerson = ref(false)
	//收件地址
	const home = ref('选择收件地址')
	//订单信息
	const indent = ref('选择取件信息')
	//前往地址页面
	const goLocation = () => {
		uni.navigateTo({
			url:'/pages/location/location'
		})
	}
	



	onShow(() => {
		if(userStore.resses.tag){
			home.value = userStore.resses.tag
		}
		
		console.log(JSON.stringify(userStore.resses))
		console.log('页面加载')
		userStore.isShowModal = false
		loginCode.value = uni.getStorageSync('loginCode')
		console.log('登录状态', loginCode.value)

		//以登录状态来切换半模态模板
		if (loginCode.value) {
			showModelVerson.value = true
		} else {
			showModelVerson.value = false
		}
	})
</script>

<style scoped lang="scss">
	* {
		box-sizing: border-box;
	}
	

	.app {
		margin: 0 auto;
		background-color: #efefef;
		width: 100vw;
		height: 100vh;
		max-width: 800px;
		box-sizing: border-box;

		.issueBox {
			width: 100%;
			height: 50%;
			position: relative;

			img {
				width: 100%;
				height: 50%;
				border-radius: 0 0 20px 20px;
			}

			.message {
				max-width: 500px;
				position: absolute;
				left: 50%;
				top: 38%;
				transform: translateX(-50%);
				width: 94%;
				// height: 60%;
				background-color: #fff;
				border-radius: 10px;
				padding: 10px;

				.messageBox {
					width: 100%;
					height: 85%;
					padding: 0;

					li {
						list-style-type: none;
						position: relative;
						height: 50%;
						.topGPS {
							width: 86%;
							float: right;
							line-height: 120rpx;
						}

						.bottomGPS {
							width: 86%;
							height: 100%;
							float: right;
							line-height: 120rpx;
						}

						view {
							font-size: 45rpx;

						}
					}

					button {
						width: 100%;
						height: 30%;
						background-color: #9af5a1;
						line-height: 100rpx;
						font-size: 45rpx;
						color: #fff;
					}

					li::before {
						content: '';
						position: absolute;
						left: 60rpx;
						width: 12px;
						height: 12px;
						border-radius: 50%;
					}
					// li:nth-child(1){
					// 	top: 0;
					// }
					// 	li:nth-child(1){
					// 	top: 0;
					// }

					.top:before {
						top: 50rpx;
						background-color: #9af5a1;
					}

					.bottom:before {
						top: 160rpx;
						background-color: #ff0000;
					}

				}

				.boxFooter {
					width: 100%;
					height: 15%;

					ul {
						width: 100%;
						height: 100%;
						list-style: none;
						display: flex;
						padding: 0;

						li {
							flex: 1;
							line-height: 90rpx;
							text-align: center;
							color: #555;
							font-size: 25rpx
						}
					}
				}
			}
		}

	}
</style>